.Knowledge {
  width: 77%;
  display: flex;
  justify-content: space-between;
  background-color: #e7eaee;
  margin: 0 auto;
  .mainLeft {
    margin: 20px 20px 0 0;
    flex: 1;
    background-color: #fff;
    .leftItem {
      display: flex;
      flex-direction: column;
      margin: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      & > div:nth-child(1) {
        display: flex;
        & > h4 {
          font-weight: bold;
          font-size: 16px;
        }
        &>span::before{
          content: '|';
          color: #eee;
          margin: 0 8px;
        }
        &>span{
          color: #979cb0;
          margin-top: 2px;
        }
      }
      & > div:nth-child(2) {
        display: flex;
        & > div:nth-child(1) {
          width: 180px;
          height: 100px;
          & > img {
            width: 180px;
            height: 100px;
          }
          margin-right: 10px;
        }
        & > div:nth-child(2) {
          & > p {
            margin-bottom: 55px;
          }
          & > div {
            & > span {
              margin: 0 15px 0 0;
            }
          }
        }
      }
    }
    .leftItem:hover{
        & > div:nth-child(1) {
            & > h4 {
              color: red;
            }
          }
    }
  }
  .mainRight {
    margin-top: 20px;
    width: 28%;
    height: 700px;
    .mRightTop {
      padding: 10px;
      & > p {
        width: 100%;
        height: 30px;
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #eee;
      }
      & > div {
        margin: 5px 0;
        font-size: 13px;
        &>span:nth-child(2){
          color: #979cb0;
        }
      }
      & > div:hover{
          color: red;
      }
      width: 100%;
      background-color: #fff;
    }
    .mRightBottom {
      margin-top: 20px;
      & > p {
        width: 100%;
        height: 30px;
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #eee;
      }
      & > div {
        margin: 10px 0;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
      }
      & > div:hover{
          color: red;
      }
      padding: 10px;
      width: 100%;
      background-color: #fff;
    }
  }
}
@media screen and (max-width: 770px) {
  .mainRight {
    display: none;
  }
}